<template>
	<view class="device-detail-page">
		<view class="page-scroll">
			<!-- 参数/性能列表 -->
			<view class="card list-card">
				<view class="list-header">
					<text class="lh-title">设备信息</text>
					<!-- <text class="lh-sub">更新时间：{{ device.updateTime }}</text> -->
				</view>
				<view class="param-list">
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备ID</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceId }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备IMEI</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.imei }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备名称</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceName }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备地址</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceAddr }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备是否绑定</text>
						</view>
						<view class="param-right">
							<text class="param-value" v-if="device.isBound == '0'">未绑定</text>
							<text class="param-value" v-if="device.isBound == '1'">已绑定</text>
							<text class="param-value" v-if="device.isBound == '2'">已注销</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="card remark-card">
				<text class="remark-title">备注：</text>
				<text class="remark-text">{{ device.remark || '暂无备注'}}</text>
			</view>
			<!-- 			<view class="flex mt30">
				<button style="border-radius: 10rpx;" class="btn-outline btn-danger mr20 ml20"
					@click="handleScan">扫码绑定流量卡</button>
				<button style="border-radius: 10rpx;" class="btn-outline mr20" @click="openShowInput">输入卡号绑定流量卡</button>
			</view> -->


			<!-- 			<view class="card list-card" v-if="iccInfo">
				<view class="list-header">
					<text class="lh-title">流量卡信息</text>
				</view>
				<view class="param-list">
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">流量卡ID</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ iccInfo.iccid }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">流量卡卡号</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ iccInfo.msisdn }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">套餐名称</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ iccInfo.packageName }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">截止时间</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ iccInfo.endTime }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">流量卡是否绑定</text>
						</view>
						<view class="param-right">
							<text class="param-value" v-if="iccInfo.isBound == '0'">未绑定</text>
							<text class="param-value" v-if="iccInfo.isBound == '1'">已绑定</text>
							<text class="param-value" v-if="iccInfo.isBound == '2'">已注销</text>
						</view>
					</view>
				</view>
			</view> -->
			<view style="height: 120rpx;"></view>
			<view>
				<!-- 底部操作（悬浮） -->
				<view class="bottom-actions">
					<!-- 			<button class="btn-outline btn-danger" @click="confirmBind"
						v-if="device.isBound == '0'">一键绑定</button> -->
					<button class="btn-outline btn-danger" @click="confirmBind">一键绑定</button>
					<button class="btn-outline" v-if="device.isBound == '1'" style="background: #e45656;color: #fff;"
						@click="confirmDelete(device)">注销设备</button>
				</view>

			</view>
		</view>
		<u-modal :show="showInput" title="卡号" @confirm="confirmIcc">
			<view class="slot-content" style="width: 100%;">
				<u--input placeholder="请输入卡号" border="surround" clearable v-model="iccidInput"
					style="width: 100%;"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		bindDeviceApi,
		offDeviceApi,
		deviceScIMEIApi,
		deviceScIccApi
	} from '@/api/index.js';
	import {
		parseUrlParams
	} from '@/utils/common.js';
	import {
		parseJSONSafe
	} from '@/utils/jsonUtil';
	export default {
		data() {
			return {
				showInput: false,
				deviceState: {
					0: '离线',
					1: '在线',
					2: '缺水',
					3: '异常',
				},
				statusColor: {
					0: 'red',
					1: 'green',
					2: 'orange',
					3: 'red',
				},
				device: {},
				IMEI: "",
				iccid: "",
				iccInfo: {
					iccid: ""
				},
				iccidInput: ""
			};
		},
		computed: {

		},
		mounted() {

		},
		onLoad(options) {
			console.log(options, 'options');
			if (options.IMEI) {
				this.IMEI = options.IMEI;
				this.deviceScIMEI()

			}
		},
		onShow() {

		},
		methods: {
			confirmIcc() {
				if (this.iccidInput === "") {
					uni.showToast({
						title: '请先输入卡号',
						icon: 'none'
					})
					return
				}
				this.showInput = false;
				this.deviceScIcc(this.iccidInput);
			},
			openShowInput() {
				this.iccidInput = "";
				this.showInput = true;
			},
			handleScan() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果：', res);
						if (res.errMsg === 'scanCode:ok') {
							const params = parseUrlParams(res.result);
							console.log(params);
							if (params.iccid) {
								this.iccid = params.iccid;
								this.deviceScIcc(params.iccid);
							} else {
								uni.showToast({
									title: '暂无信息',
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: '请稍后重试',
								icon: 'none'
							})
						}

					}
				});
			},
			// 流量卡详情信息
			deviceScIcc(iccid) {
				deviceScIccApi(iccid).then(resp => {
					console.log(resp);
					if (resp.code === 200) {
						console.log(resp.data, 'resp.data');
						this.iccInfo = resp.data;
					}
				})
			},
			// 设备详情信息
			deviceScIMEI() {
				deviceScIMEIApi(this.IMEI).then(resp => {
					console.log(resp);
					if (resp.code === 200) {
						this.device = resp.data;
					}
				})
			},
			// 确认绑定设备
			confirmBind(device) {
				uni.showModal({
					title: '绑定设备',
					content: `确认绑定设备 ${ this.device.deviceId } 吗？`,
					success: (res) => {
						if (res.confirm) {
							this.editDevice()
						}
					}
				})
			},
			// 绑定设备
			async editDevice() {
				const res = await bindDeviceApi({
					deviceId: this.device.deviceId,
					// iccId: this.iccInfo.iccid || ""
				});
				console.log(res, 'res');
				console.log('提交数据：', this.form)
				if (res.code === 200) {
					uni.showToast({
						title: '设备绑定成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/myDevices/myDevices'
						})
					}, 1000)
				}
			},
			// 删除设备
			confirmDelete(device) {
				uni.showModal({
					title: '注销设备',
					content: `确认注销设备 ${ device.deviceId } 吗？`,
					success: (res) => {
						if (res.confirm) {
							this.deleteDeviceFun()
						}
					}
				})
			},
			deleteDeviceFun() {
				// TODO: 调用删除接口
				offDeviceApi(this.device.deviceId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 800);
					}
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 页面整体 */
	.device-detail-page {
		min-height: 100vh;
		background: #f6f7f8;
		position: relative;
		color: #111;
		padding-bottom: 110rpx;
	}

	/* 顶部 */
	.top-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		justify-content: space-between;
		background: transparent;
	}

	.back {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		font-size: 32rpx;
		color: #111;
		font-weight: 600;
	}

	.more {
		font-size: 28rpx;
		color: #999;
	}

	/* 通用卡片样式 */
	.card {
		background: #fff;
		margin: 18rpx 16rpx;
		border-radius: 16rpx;
		padding: 18rpx;
		box-shadow: 0 10rpx 30rpx rgba(20, 30, 50, 0.04);
	}

	/* 概览卡 */
	.overview-card .overview-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.overview-card .label {
		color: #888;
		font-size: 26rpx;
	}

	.overview-card .id {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	}

	.overview-card .right {
		text-align: right;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.signal-icon {
		width: 36rpx;
		height: 24rpx;
	}

	.signal-text {
		font-size: 24rpx;
		color: #666;
	}

	.overview-stats {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.stat {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
	}

	.stat-label {
		display: block;
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #888;
	}

	.divider {
		width: 1rpx;
		height: 56rpx;
		background: #f0f0f0;
		margin: 0 8rpx;
	}

	/* 核心卡 */
	.core-card {
		padding-top: 20rpx;
	}

	.core-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.device-visual {
		width: 38%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.device-img {
		width: 110rpx;
		height: 110rpx;
	}

	.core-values {
		width: 55%;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.kv {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kv-value {
		font-size: 30rpx;
		color: #0081ff;
		font-weight: 700;
	}

	.kv-label {
		font-size: 22rpx;
		color: #888;
	}

	.core-grid {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.grid-item {
		background: #f9fafb;
		flex: 0 0 calc(33.333% - 8rpx);
		padding: 12rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.grid-label {
		display: block;
		color: #7b8790;
		font-size: 22rpx;
	}

	.grid-value {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	/* 参数列表卡 */
	.list-card .list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.lh-title {
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	.lh-sub {
		font-size: 22rpx;
		color: #999;
	}

	.param-list {
		margin-top: 10rpx;
	}

	.param-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f1f3f5;
	}

	.param-name {
		font-size: 26rpx;
		color: #666;
	}

	.param-note {
		font-size: 22rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.param-value {
		font-size: 26rpx;
		color: #222;
		font-weight: 600;
	}

	/* 备注卡 */
	.remark-card {
		margin-top: 12rpx;
	}

	.remark-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.remark-text {
		font-size: 24rpx;
		color: #444;
		line-height: 34rpx;
	}

	/* 底部按钮 */
	.bottom-actions {
		position: fixed;
		left: 0rpx;
		right: 16rpx;
		bottom: 0rpx;
		display: flex;
		gap: 16rpx;
		justify-content: center;
		align-items: center;
		background: #fff;
		width: 100%;
		// border: 1rpx solid #000;
		z-index: 9999;
		padding: 20rpx 20rpx 58rpx 20rpx;
		// padding-bottom: 58rpx;
	}

	.btn-outline {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: #fff;
		border: 1rpx solid #e6e6e6;
		color: #666;
		font-size: 26rpx;
	}

	.btn-danger {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: linear-gradient(90deg, #00aaff, #0081ff);
		color: #fff;
		font-weight: 600;
		font-size: 26rpx;
	}

	/* 弹窗内样式 */
	.popup-delete {
		padding: 28rpx;
	}

	.popup-title {
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.popup-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.popup-actions {
		display: flex;
		gap: 12rpx;
		justify-content: flex-end;
	}

	/* CSS 信号条 */
	.signal-bars {
		display: flex;
		align-items: flex-end;
		gap: 6rpx;
		height: 28rpx;
		/* 总高度，根据需要调整 */
		padding-left: 6rpx;
	}

	/* 每条的基础样式 */
	.signal-bars .bar {
		width: 6rpx;
		background: #e6edf3;
		/* 未激活颜色 */
		border-radius: 3rpx;
		transition: background-color 180ms ease, transform 180ms ease;
		transform-origin: bottom center;
		opacity: 0.95;
	}

	/* 各列高度（从左到右逐渐增高） */
	.signal-bars .b1 {
		height: 8rpx;
	}

	.signal-bars .b2 {
		height: 14rpx;
	}

	.signal-bars .b3 {
		height: 20rpx;
	}

	.signal-bars .b4 {
		height: 26rpx;
	}

	/* 激活颜色（主色） */
	.signal-bars.level-1 .b1,
	.signal-bars.level-2 .b1,
	.signal-bars.level-3 .b1,
	.signal-bars.level-4 .b1 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-2 .b2,
	.signal-bars.level-3 .b2,
	.signal-bars.level-4 .b2 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-3 .b3,
	.signal-bars.level-4 .b3 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-4 .b4 {
		background: #0081ff;
		transform: translateY(0);
	}

	/* 非激活时稍微缩小，增加层次 */
	.signal-bars .bar {
		transform: translateY(6rpx) scaleY(0.92);
	}

	.signal-bars.level-1 .b1 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-2 .b1,
	.signal-bars.level-2 .b2 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-3 .b1,
	.signal-bars.level-3 .b2,
	.signal-bars.level-3 .b3 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-4 .b1,
	.signal-bars.level-4 .b2,
	.signal-bars.level-4 .b3,
	.signal-bars.level-4 .b4 {
		transform: translateY(0) scaleY(1);
	}

	/* 可选：调整在小屏上显示更易读 */
	@media (min-width: 0px) {
		.signal-bars {
			gap: 8rpx;
		}

		.signal-bars .bar {
			width: 7rpx;
			border-radius: 3rpx;
		}
	}

	.green {
		background: #29c26a;
		color: #29c26a;
	}

	.red {
		background: #ff5a5a;
		color: #ff5a5a;
	}

	.orange {
		background: #ff9a3a;
		color: #ff9a3a;
	}

	.dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}
</style>